<template>
  <div class="tab-enter-info">
    <section class="section">
      <div class="sec-header">
        待盘点入库产品
      </div>
      <flexbox
        align="center"
        justify="flex-end">
        <el-button
          v-if="detailData.state == 3 && inventoryStorageAuth"
          type="primary"
          size="mini"
          class="xr-btn--orange"
          @click="showEnter = !showEnter">
          盘点入库
        </el-button>
      </flexbox>

      <tab-table
        v-if="showAwaitTable"
        :request-config="awaitRequestConfig"
        :height="0"
        :max-height="300"
        class="sec-body table-list"
        @render-ok="handleRenderOk"
        @row-click="handleTableRowClick" />
    </section>

    <section class="section">
      <div class="sec-header">
        已盘点入库产品
      </div>

      <div
        v-empty="enterProductList.length === 0"
        class="sec-body">
        <div
          v-for="(item, index) in enterProductList"
          :key="index"
          class="order-item">
          <flexbox class="sec-desc">
            <flexbox-item class="sec-desc-lf">
              <span class="desc-item">入库单号：{{ item.orderNumber || '--' }}</span>
              <span class="desc-item">入库时间：{{ item.inventoryRecordTime | formatTime }}</span>
              <span class="desc-item">负责人：{{ item.ownerUserId || '--' }}</span>
              <span class="desc-item">创建时间：{{ item.createTime || '--' }}</span>
            </flexbox-item>
            <el-button
              v-if="inventoryInvalidAuth && !isObsolete"
              type="primary"
              size="mini"
              class="xr-btn--orange"
              @click="handleRemove(item)">
              作废
            </el-button>
          </flexbox>

          <el-table
            :data="item.list"
            :max-height="300"
            border
            style="width: 100%;">
            <template v-for="(field, c_index) in enterFieldList">
              <el-table-column
                :key="c_index"
                :prop="field.fieldName"
                :label="field.name"
                show-overflow-tooltip />
            </template>
          </el-table>
          <div class="order-item-desc">
            备注: {{ item.remark }}
          </div>
        </div>
      </div>
    </section>

    <enter-dialog
      v-if="showEnter"
      :batch-id="batchId"
      :data-list="awaitProductList"
      @update="handleUpdate"
      @close="showEnter = !showEnter" />
  </div>
</template>

<script>
/**
 * Create by yxk at 2020/6/17
 */
import {
  jxcInventoryQueryRecordListAPI,
  jxcInventoryQueryStateRecordListAPI,
  jxcInventoryRecordSetStateByIdsAPI
} from '@/api/jxc/inventory'
import TabTable from '../../../components/DetailTab/TabTable'
import EnterDialog from './EnterDialog'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  name: 'TabEnterInfo',
  filters: {
    formatTime(date) {
      if (!date) return '--'
      return moment(date).format('YYYY-MM-DD')
    }
  },
  components: {
    TabTable,
    EnterDialog
  },
  inheritAttrs: false,
  props: {
    batchId: {
      type: String,
      required: true
    },
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    const awaitFieldList = [
      { fieldName: 'productName', name: '产品名称' },
      { fieldName: 'spDataValue', name: '产品规格' },
      { fieldName: 'productCompany', name: '单位' },
      { fieldName: 'account', name: '账面数量' },
      { fieldName: 'actualNumber', name: '实际数量' },
      { fieldName: 'lossNumber', name: '盈亏数量' },
      { fieldName: 'inventoryRecordNumber', name: '已盘点入库' },
      { fieldName: 'weiinventoryRecordNumber', name: '待盘点入库' }
    ]

    const enterFieldList = [
      { fieldName: 'productName', name: '产品名称' },
      { fieldName: 'spDataValue', name: '产品规格' },
      { fieldName: 'productCompany', name: '单位' },
      { fieldName: 'account', name: '账面数量' },
      { fieldName: 'actualNumber', name: '实际数量' },
      { fieldName: 'lossNumber', name: '盈亏数量' },
      { fieldName: 'inventoryRecordNumber', name: '本次盘点入库' },
      { fieldName: 'remark', name: '备注' }
    ]
    return {
      showAwaitTable: false,
      awaitRequestConfig: {
        fieldList: awaitFieldList,
        listParams: {},
        listRequest: jxcInventoryQueryRecordListAPI
      },
      awaitProductList: [],

      enterProductList: [],
      enterFieldList: enterFieldList,

      showEnter: false
    }
  },
  computed: {
    ...mapGetters(['jxc']),
    inventoryStorageAuth() {
      return this.jxc && this.jxc.inventory && this.jxc.inventory.storage
    },
    inventoryInvalidAuth() {
      return this.jxc && this.jxc.inventory && this.jxc.inventory.invalid
    },
    isObsolete() {
      return this.detailData.hasOwnProperty('state') && this.detailData.state == 6
    }
  },
  watch: {
    batchId: {
      handler(val) {
        if (val) {
          this.showAwaitTable = false
          this.awaitRequestConfig.listParams = {
            batchId: this.batchId
          }
          this.showAwaitTable = true
          this.getData()
        }
      },
      immediate: true
    }
  },
  methods: {
    getData() {
      jxcInventoryQueryStateRecordListAPI({
        batchId: this.batchId
      }).then(res => {
        console.log('jxcInventoryQueryStateRecordListAPI :', res)
        this.enterProductList = res.data
      }).catch(() => {})
    },

    handleUpdate() {
      this.showAwaitTable = false
      this.getData()
      this.$nextTick(() => {
        this.showAwaitTable = true
        this.$emit('update')
      })
    },

    handleRemove(item) {
      this.$confirm(`确定要作废该盘点入库单吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        jxcInventoryRecordSetStateByIdsAPI({
          batchId: item.bbatchId
        }).then(() => {
          this.$message.success('作废成功')
          this.handleUpdate()
        }).catch(() => {})
      }).catch(() => {
        this.$message.info('已取消')
      })
    },

    handleRenderOk(data) {
      this.awaitProductList = data.data || []
    },
    handleTableRowClick() {}
  }
}
</script>

<style scoped lang="scss">
.tab-enter-info {
  padding: 15px;

  .section {
    margin-bottom: 15px;
    .sec-header {
      position: relative;
      padding-left: 10px;
      &:before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        content: '';
        width: 3px;
        height: 14px;
        display: block;
        background: $xr-color-primary;
      }
    }
    .sec-body {
      margin-top: 10px;
      &.table-list {
        margin-top: 5px;
      }

      /deep/ .empty-content {
        margin-top: 30px;
      }

      .sec-desc-lf {
        .desc-item {
          margin-right: 20px;
          &:last-child {
            margin-right: 0;
          }
        }
      }

      .order-item {
        margin-bottom: 10px;
        .el-table {
          margin: 5px 0;
        }
      }
    }
  }
}
</style>
